<template>
	<view class="junDateBigBox" v-if="is_show">
		<view style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;" @click="closeSelector"></view>
		<view class="components-selector-index">
			<view class="zero">
				<!-- 				<view class="two">
					<view class="two-week" v-for="(item, index) of week" :key="index">{{ item }}</view>
				</view> -->
				<view class="junDateTitle">{{this.$t('maps.ctwfont47')}}</view>
				<view class="searchBoxcolInput">
					<view class="searchBoxcolInputItem" :style="{ backgroundColor: imgleft ? 'red' : '' }">
						<view v-if="imgleft" @tap="goScrollTop(checkTime.start, 'left')" style="text-align: center; color: #fff; width: 100%;">
							{{ dateFormat(checkTime.start, true) }}
						</view>
						<view v-else>{{this.$t('maps.ctwfont48')}}</view>
						<uni-icons :color="imgleft ? '#fff' : '#cecece'" type="calendar" size="14"></uni-icons>
					</view>
					<view style="font-weight: 700; color: #AEB0B3; padding: 0 5px;">-</view>
					<view class="searchBoxcolInputItem" :style="{ backgroundColor: imgRight ? 'red' : '' }">
						<view v-if="imgRight" @tap="goScrollTop(checkTime.end, 'right')" style="text-align: center; color: #fff; width: 100%;">
							{{ dateFormat(checkTime.end, true) }}
						</view>
						<view v-else>{{this.$t('maps.ctwfont49')}}</view>
						<uni-icons :color="imgRight ? '#fff' : '#cecece'" type="calendar" size="14"></uni-icons>
					</view>
				</view>
				<view class="redLine">
					<view class="imgLeft" v-show="imgleft"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/superAnt/ip-02.png"></image></view>
					<view class="imgRight" v-show="imgRight">
						<image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/superAnt/Warning-102.png"></image>
					</view>
				</view>
				<scroll-view
					class="four"
					:scroll-y="true"
					upper-threshold="60px"
					@scroll="monitor"
					@scrolltolower="lastLoad"
					@scrolltoupper="filstLoad"
					:scroll-top="scrollViewTop"
				>
					<view style="height: 10px;"></view>
					<view class="four-year" v-for="(item, index) of monthList" :key="index + 'big'">
						<view :id="item.year + '-' + key" :class="['date-' + item.year, 'four-month']" v-for="(value, key) of item.month" :key="key + 'item'">
							<view class="four-month-date">{{ item.year + ' Year ' + (key + 1) + ' Month' }}</view>
							<view class="two">
								<view class="two-week" v-for="(item, index) of week" :key="index">{{ item }}</view>
							</view>
							<view class="four-month-day">
								<view class="four-days" v-for="(days, iss) in mLFunc(key, item.year)" :key="iss + 'box'"></view>
								<view @click="checkTimeFunc(days, key, item.year)" :class="[checkClass(days, key, item.year), 'four-days']" v-for="days in value.num" :key="days">
									<view class="four-days-data">
										<!-- <view v-if="invalid(days, key, item.year)" class="four-days-invalid">已租</view> -->
										<view v-if="checkEtc(days, key, item.year)" class="four-days-check-btn">Now</view>
										<view v-if="checkStart(days, key, item.year)" class="four-days-check-btn">start</view>
										<view v-if="checkEnd(days, key, item.year)" class="four-days-check-btn">end</view>
										<view v-if="isDayBox(days, key, item.year)" class="four-days-check-btn-red">*</view>
										{{ days }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="five" @click="closeSelector"></view>
				<!-- <view style="position: absolute; left: 46%; bottom: 3%;"><uni-icons class="one-title-close" type="closeempty" size="30" @click="closeSelector"></uni-icons></view> -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'index',
	props: {
		start: {
			type: String | Number,
			default() {
				return new Date().getTime();
			}
		},
		end: {
			type: String | Number,
			default() {
				return new Date(new Date().getFullYear() + 3, 2, 21, 23, 59, 59).getTime();
			}
		},
		is_show: {
			type: Boolean,
			default() {
				return false;
			}
		},
		// 不能选中的时间
		// invalidList: {
		// 	type: Array,
		// 	default() {
		// 		return [];
		// 	}
		// },
		confirm: {
			type: Function
		}
	},
	data() {
		return {
			week: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
			startTime: 0, // 开始时间
			endTime: 0, // 结束时间
			startMonth: 0, // 开始月
			endMonth: 0, // 结束月
			monthList: [],
			placeTime: 0, // 下个月份
			scrollViewTop: 0, // 滚动到指定位置
			// 选中时间
			checkTime: {
				start: 0,
				end: 0
			}
		};
	},
	created() {
		this.open();
	},
	computed: {
		imgleft() {
			if (this.checkTime.start != 0 && this.checkTime.start) {
				return true;
			} else {
				return false;
			}
		},

		imgRight() {
			if (this.checkTime.end != 0 && this.checkTime.end) {
				return true;
			} else {
				return false;
			}
		}
	},
	watch: {
		is_show: {
			handler(n, o) {
				if (n) {
					if (this.monthList.length <= 0) {
						this.open();
					}
					let year = new Date(this.startMonth).getFullYear();
					let month = new Date(this.startMonth).getMonth() + 1;
					setTimeout(() => {
						this.monthDistance(year, month);
					}, 300);
				}
			},
			deep: true
		}
	},
	methods: {
		open() {
			//计算出开始时间
			//进行比较输入的开始时间和当前时间比较哪个更大
			//得出月和日
			let current = new Date().getTime();
			let checkTime = this.start;
			// let startTime = checkTime >= current ? checkTime : current;
			let startTime = checkTime ? checkTime : current;
			//输入年开始年份
			//初始化开始年份
			let start = new Date(startTime);
			let startYear = start.getFullYear();
			this.startTime = new Date(startYear, start.getMonth(), start.getDate(), 0, 0, 0).getTime();
			this.startMonth = new Date(startYear, start.getMonth(), 1, 0, 0, 0).getTime();
			this.endTime = this.end;
			this.endMonth = this.end;
			this.placeTime = this.startMonth;
			this.monthList.push({ year: startYear, month: this.monthTimestamp(startYear) });
			if (this.start && this.start > 0 && this.end && this.end > 0) {
				this.checkTime = {
					start: this.start,
					end: this.end
				};
			}
		},
		// 每月开始天
		mLFunc(month, year) {
			return new Date(year, month, 1, 0, 0, 0).getDay();
		},
		lastLoad() {
			//加载下一年
			let year = this.monthList[this.monthList.length - 1].year + 1;
			let month = this.monthTimestamp(year);
			this.monthList.push({
				year: year,
				month: month
			});
			// let _this = this;
			// setTimeout(function() {
			// 	_this.monthDistance(year);
			// }, 500);
		},
		filstLoad() {
			//加载前一年
			let year = this.monthList[0].year - 1;
			let month = this.monthTimestamp(year);
			this.monthList.unshift({
				year: year,
				month: month
			});
			// let _this = this;
			// setTimeout(function() {
			// 	_this.monthDistance(year);
			// }, 500);
		},
		monthTimestamp(year) {
			let month = [
				{ timestamp: 0, num: 31 },
				{ timestamp: 0, num: 28 },
				{ timestamp: 0, num: 31 },
				{ timestamp: 0, num: 30 },
				{ timestamp: 0, num: 31 },
				{ timestamp: 0, num: 30 },
				{ timestamp: 0, num: 31 },
				{ timestamp: 0, num: 31 },
				{ timestamp: 0, num: 30 },
				{ timestamp: 0, num: 31 },
				{ timestamp: 0, num: 30 },
				{ timestamp: 0, num: 31 }
			];
			if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
				//润年
				month[1]['num'] = 29;
			}
			return month.map(function(val, index) {
				val['timestamp'] = new Date(year, index, 1, 0, 0, 0).getTime();
				return val;
			});
		},
		monthDistance(year, month) {
			let _this = this;
			uni.createSelectorQuery()
				.in(_this)
				.selectAll('.date-' + year)
				.boundingClientRect(function(res) {
					res.forEach(item => {
						let date = item.id.split('-');
						const yue = parseInt(date[1]) + 1;
						if (month == yue) {
							_this.scrollViewTop = item.top - (item.height - 30);
						}
					});
				})
				.exec();
		},
		monitor(e) {
			// this.scrollViewTopTwo.one = e.detail.scrollTop;
		},
		// invalid(days, month, year) {
		// 	let time = new Date(year, month, parseInt(days) + 1, 0, 0, 0).getTime() / 1000;
		// 	for (let item of this.invalidList) {
		// 		if (time >= item.start && time <= item.end) {
		// 			return true;
		// 		}
		// 	}
		// 	return false;
		// },
		checkClass(days, month, year) {
			let checkTime = this.checkTime;
			let time = new Date(year, month, parseInt(days), 0, 0, 0).getTime();

			// if (this.startTime > time || time >= this.endTime) {
			// 	return 'four-days-not-check';
			// }

			if (time > checkTime.start && checkTime.end > time) {
				return 'four-days-check';
			}

			if (time == checkTime.start && time == checkTime.end) {
				return 'four-days-check-equal-right';
			}

			if (time == checkTime.start) {
				if (checkTime.start != 0 && checkTime.end != 0) {
					return 'four-days-check-equal-right-bg';
				}
				return 'four-days-check-equal-right';
			}

			if (checkTime.end == time) {
				if (checkTime.start != 0 && checkTime.end != 0) {
					return 'four-days-check-equal-left-bg';
				}
				return 'four-days-check-equal-left';
			}
			return '';
		},
		// 开始时间
		checkStart(days, month, year) {
			let checkTime = this.checkTime;
			let time = new Date(year, month, parseInt(days), 0, 0, 0).getTime();
			if (time == checkTime.start && time != checkTime.end) {
				return true;
			}
			return false;
		},
		// 结束时间
		checkEnd(days, month, year) {
			let checkTime = this.checkTime;
			let time = new Date(year, month, parseInt(days), 0, 0, 0).getTime();
			if (time == checkTime.end && time != checkTime.start) {
				return true;
			}
			return false;
		},
		checkEtc(days, month, year) {
			let checkTime = this.checkTime;
			let time = new Date(year, month, parseInt(days), 0, 0, 0).getTime();
			if (time == checkTime.end && time == checkTime.start) {
				return true;
			}
			return false;
		},
		// 当前时间
		isDayBox(days, month, year) {
			let time = new Date(year, month, parseInt(days), 0, 0, 0).getTime();
			const dateBox = new Date();
			let year2 = new Date(dateBox).getFullYear();
			let month2 = new Date(dateBox).getMonth();
			let days2 = new Date(dateBox).getDate();
			if (new Date(year2, month2, parseInt(days2), 0, 0, 0).getTime() === time) {
				return true;
			}
			return false;
		},
		// invalidRange(start, end) {
		// 	start = start / 1000;
		// 	end = end / 1000;
		// 	let invalidList = this.invalidList;
		// 	for (let val of invalidList) {
		// 		if (
		// 			(val.start <= start && val.end >= start) ||
		// 			(val.start <= end && val.end >= end) ||
		// 			(start <= val.start && end >= val.end) ||
		// 			(val.start <= start && val.end >= end)
		// 		) {
		// 			return true;
		// 		}
		// 	}
		// 	return false;
		// },
		checkTimeFunc(days, month, year) {
			let time = new Date(year, month, parseInt(days), 0, 0, 0).getTime();
			let checkTime = this.checkTime;
			// if (this.startTime > time || time >= this.endTime) {
			// 	uni.showToast({
			// 		title: '请勿选择开始之后的时间',
			// 		icon: 'none',
			// 		duration: 1000
			// 	});
			// 	return;
			// }

			//选择验证
			// if (this.invalid(days, month, year)) {
			// 	uni.showToast({
			// 		title: '请勿选择开始之后的时间',
			// 		icon: 'none',
			// 		duration: 1000
			// 	});
			// 	return;
			// }

			if (checkTime.start != 0 && checkTime.end != 0) {
				checkTime = { start: 0, end: 0 };
			}

			if (checkTime.start != 0) {
				checkTime.end = time;
				if (checkTime.end < checkTime.start) {
					let start = checkTime.start;
					checkTime.start = time;
					checkTime.end = start;
				}

				// if (this.invalidRange(checkTime.start, checkTime.end)) {
				// 	uni.showToast({
				// 		title: '请勿选择开始之后的时间',
				// 		icon: 'none',
				// 		duration: 1000
				// 	});
				// 	return;
				// }
			}

			if (checkTime.start == 0) {
				checkTime.start = time;
			}
			this.checkTime = checkTime;
			if (checkTime.start != 0 && checkTime.end != 0) {
				const objTime = {
					start: this.dateFormat(checkTime.start),
					end: this.dateFormat(checkTime.end),
					startShow: this.dateFormat(checkTime.start, true),
					endShow: this.dateFormat(checkTime.end, true)
				};
				this.$emit('JunDateConfirm', objTime);
				// this.$emit('closeIs_show', false);
				setTimeout(() => {
					this.closeSelector();
				}, 500);
			}
		},
		closeSelector() {
			this.$emit('closeIs_show', false);
			this.startTime = 0; // 开始时间
			this.endTime = 0; // 结束时间
			this.startMonth = 0; // 开始月
			this.endMonth = 0; // 结束月
			this.monthList = [];
			this.placeTime = 0; // 下个月份
			this.scrollViewTop = 0; // 滚动到指定位置
			// 选中时间
			this.checkTime = {
				start: 0,
				end: 0
			};
		},
		// 时间过滤器
		dateFormat(value, type) {
			if (!value) {
				return '';
			}
			const dt = new Date(value);
			const y = dt.getFullYear();
			const m = (dt.getMonth() + 1 + '').padStart(2, 0);
			const d = (dt.getDate() + '').padStart(2, 0);
			if (type) {
				return `${d}-${m}-${y}`;
			} else {
				return `${y}-${m}-${d}`;
			}
		},
		// 跳转至当前时间
		goScrollTop(time, type) {
			// if (time && time != 0) {
			// 	let year = new Date(time).getFullYear();
			// 	let month = new Date(time).getMonth() + 1;
			// 	setTimeout(() => {
			// 		this.monthDistance(year, month);
			// 	}, 500);
			// }
		}
	}
};
</script>

<style lang="scss" scoped>
.five {
	width: 100%;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
	flex-shrink: 0;
}

.zero {
	width: 100%;
	height: 93vh;
	// background: white;
	display: flex;
	flex-flow: column;
	border-radius: 30rpx 30rpx 0 0;
}

.four {
	height: 100vh - 25;
	background: white;
	overflow-y: auto;

	.four-year {
		padding: 0rpx 20rpx;

		.four-month {
			display: flex;
			flex-flow: column;

			.four-month-date {
				font-size: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 80rpx;
			}

			.four-month-day {
				display: flex;
				flex-wrap: wrap;
				padding: 0 0 10rpx 0;
				border-bottom: 1px solid #f5f5f5;

				.four-days-not-check {
					background: #f5f5f5;
				}

				.four-days-check-equal-left,
				.four-days-check-equal-right {
					.four-days-data {
						padding: 0 10rpx;
						box-sizing: border-box;
						border-radius: 20px;
						background: #f77687;
					}
				}

				.four-days-check-equal-left-bg,
				.four-days-check-equal-right-bg {
					.four-days-data {
						padding: 0 10rpx;
						box-sizing: border-box;
						border-radius: 20px;
						background: #f77687;
					}
				}

				.four-days-check-equal-left-bg {
					background: linear-gradient(to right, #ffbbc4 0%, #ffbbc4 50%, #ffffff 51%, #ffffff 100%);
				}

				.four-days-check-equal-right-bg {
					background: linear-gradient(to left, #ffbbc4 0%, #ffbbc4 50%, #ffffff 51%, #ffffff 100%);
				}

				.four-days-check {
					background: #ffbbc4;
				}

				.four-days {
					display: flex;
					justify-content: center;
					align-items: center;
					width: calc(calc(80vw - 40rpx) / 7);
					height: 80rpx;
					margin-bottom: 10rpx;
					.four-days-data {
						position: relative;
						top: 0px;
						left: 0px;
						width: calc(calc(calc(80vw - 40rpx) / 7) - 20rpx);
						height: 80rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.four-days-check-btn {
							font-size: 18rpx;
							position: absolute;
							top: 5rpx;
							border-radius: 2px;
						}
						.four-days-check-btn-red {
							font-size: 24rpx;
							position: absolute;
							bottom: 0;
							color: red;
						}
						.four-days-invalid {
							font-size: 15rpx;
							margin-bottom: 10rpx;
							position: absolute;
							top: 8rpx;
							background: #bbbbbb;
							border-radius: 2px;
							color: white;
							padding: 1rpx 5rpx;
						}
					}
				}
			}
		}
	}
}

.three {
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	font-size: 30rpx;
	align-items: center;
	height: 80rpx;
	background: white;
}

.two {
	flex-shrink: 0;
	display: flex;
	// padding: 20rpx;
	justify-content: space-between;
	background: white;
	.two-week:first-child,
	.two-week:last-child {
		color: rgb(235, 121, 25);
	}

	.two-week {
		width: 15%;
		text-align: center;
		font-size: 26rpx;
		color: rgb(92, 95, 100);
	}
}

.one {
	flex-shrink: 0;
	display: flex;
	position: relative;
	top: 0px;
	left: 0px;
	justify-content: center;
	align-items: center;
	padding: 20rpx;
	background: white;
	.one-title-close {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		font-size: 40rpx;
		color: #bbbdc0;
	}

	.one-title {
		font-size: 30rpx;
	}
}
.junDateTitle {
	text-align: center;
	font-size: 32rpx;
	color: #fff;
	margin-bottom: 20rpx;
}
.searchBoxcolInput {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 50rpx;
	.searchBoxcolInputItem {
		width: 100%;
		height: 28px;
		border: 1px solid #fff;
		border-radius: 20px;
		background-color: #fff;
		color: #cecece;
		padding: 5px 10px;
		box-sizing: border-box;
		font-size: 19rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
.redLine {
	position: relative;
	top: 1px;
	left: -5%;
	width: 110%;
	height: 2px;
	background-color: red;
	.imgLeft {
		position: absolute;
		left: -5%;
		top: -40px;
		width: 70px;
		height: 100px;
		z-index: 1;
	}
	.imgRight {
		position: absolute;
		right: -5%;
		top: -35px;
		width: 70px;
		height: 100px;
		z-index: 1;
	}
}

.components-selector-index {
	width: 80%;
	height: 100vh;
	display: flex;
	align-items: flex-end;
	position: relative;
	bottom: 0px;
	left: 10%;
}
.junDateBigBox {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(5rpx);
	overflow: hidden;
	z-index: 9999;
}
</style>
